<template>
  <select class="form-control" @change="onSelectItem($event)" :multiple="selectorMultiple">
    <option v-for="(index, item) of selectorItems"
            :selected="selectorCurrentIndex == index || selectorCurrentItemValue == item.value"
            :value="item.value">{{ item.text }}</option>
  </select>
</template>

<script type='text/babel'>
  export default {
    props: {
      selectorCurrentIndex: {
        type: Number,
        default: -1
      },
      selectorCurrentItemValue: {
        type: String,
        default: ''
      },
      selectorItems: Array,
      selectorMultiple: Boolean
    },
    vuex: {
      actions: {
        onSelectItem: function (store, event) {
          var self = this
          self.selectorCurrentIndex = event.target.selectedIndex
          self.selectorCurrentItemValue = event.target.value
          store.dispatch('ON_SELECTOR_SELECT_ITEM', self,
            self.selectorCurrentIndex, self.selectorCurrentItemValue, event)
        }
      }
    }
  }
</script>

<style>
</style>
